<template>
	<view class="page">
		<view class="list">
      <view class="hd">请选择要进入的门店</view>
      <view class="bd">
        <view class="item" v-for="(item, index) in list" :key="index" @click="pressStore(item)">
          <image class="ico" src="/static/assets/icon_dpxz.png"></image>
          <view class="side">
            <text class="title">{{item.role_name}}</text>
            <text class="address">{{item.region.province}} {{item.region.city}}{{item.region.region}} {{item.detail}}</text>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import store from '@/store'
  import * as LoginApi from '@/api/login'
	export default {
		data() {
			return {
				list: [],
			};
		},
    onLoad() {
      const app = this;
      LoginApi.getStoreList()
      .then(res => {
        app.list = res.data.list
        console.log(app.list)
      })
    },
    methods: {
      pressStore(item) {
        store.dispatch('SetStore', item)
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    }
	}
</script>

<style lang="scss" scoped>
.list {
  background-color: #fff;
  margin-top: 20rpx;
  min-height: 100vh;
  
  .hd {
    padding: 40rpx;
  }
  .bd {
    padding: 0 40rpx 40rpx
  }
  .item {
    display: flex;
    
    & + .item {
      margin-top: 40rpx;
    }
    
    .ico {
      width: 45rpx;
      height: 42rpx;
      margin-top: 2rpx;
    }
    .side {
      flex: 1;
      padding-left: 24rpx;
      
      .title {
        font-size: 32rpx;
        line-height: 44rpx;
        color: #333;
        display: block;
      }
      .address {
        display: block;
        margin-top: 16rpx;
        color: #aaabab;
        font-size: 24rpx;
        line-height: 34rpx;
      }
    }
    .iconfont {
      margin-top: 24rpx;
    }
  }
}
</style>
